<style>
    .pay-options {
        display: flex;
        width: 100%;
        height: 100%;
        justify-content: center;
    }

    .pay-options .option-item {
        height: 100px;
        width: 156px;
        background: #F5F6F9;
        padding: 0;
        border-radius: 3px !important;
        border: 1px solid #F5F6F9;
        box-shadow: none !important;
        display: flex;
        justify-content: center;
        margin-right: 10px;
        align-items: center;
        flex-direction: column;
        cursor: pointer;
    }

    .pay-options .option-item.active {
        background: #fff;
        border: 1px solid #2932e1;
    }

    .pay-options .option-item .token {
        font-size: 12px;
        line-height: 17px;
        color: rgba(0, 0, 0, 0.6);
    }

    .pay-options .option-item .price {
        margin-top: 4px;
        font-size: 24px;
        line-height: 32px;
        color: #000;
        font-weight: 500;
    }

    .qrcode-box, .pay-types {
        width: 100%;
        /*border: 1px solid #EAEAEB;*/
        /*box-shadow: 0 5px 12px 0 rgba(41, 50, 225, 0.08);*/
        /*padding: 30px 20px;*/
        display: flex;
        justify-content: center;
        margin: 20px auto;
    }

    .qrcode-img {
        width: 200px;
        height: 200px;
    }

    .pay-types .pay-type {
        width: 156px;
        height: 50px;
        color: #999;
        border: 1px solid #999;
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;
        font-size: 15px;
        border-radius: 5px;
    }

    .pay-types .pay-type.active {
        border: 1px solid #2932e1;
        color: #000;
        font-weight: bold;
    }

    .pay-types .pay-type-alipay {
        margin-left: 20px;
    }
</style>

<div class="alert alert-primary">
    <p>紫薯AI通信介绍</p>
    <p>如何接入AI开发？<a href="" class="text text-primary" target="_blank">点击查看帮助文档</a></p>
</div>


<div class="form-group">
    <label class="col-lg control-label">接口环境</label>
    <div class="col-sm-9 col-xs-12">
        <label class="radio-inline">
            <input type="radio" name="data[aidrive][isDevelop]" value="1" {if $accountSettings['aidrive']['isDevelop']==1}checked="checked"{/if} onclick="changeIsDevelop(1)"> 测试环境
        </label>
        <label class="radio-inline">
            <input type="radio" name="data[aidrive][isDevelop]" value="0" {if $accountSettings['aidrive']['isDevelop']==0}checked="checked"{/if} onclick="changeIsDevelop(0)"> 正式环境
        </label>
        <!-- <a class="radio-inline js-clip" data-url=""></a> -->
    </div>
</div>

<div class="form-group">
    <label class="col-lg control-label">接口地址</label>
    <div class="col-sm-9 col-xs-12">
        <input type='text' value="{$accountSettings['aidrive']['clientUrl'] ? $accountSettings['aidrive']['clientUrl'] : 'https://ai.zishuju.cn/newAi'}" name='data[aidrive][clientUrl]' class="form-control" data-rule-required='true' {if !empty($accountSettings['aidrive']['clientUrl'])}readonly ondblclick="this.readOnly=false" οnchange="this.readOnly=true" data-toggle="tooltip" data-placement="top" data-original-title="双击修改"{/if}/>
    </div>
</div>

{if empty($accountSettings['aidrive']) || $aiDriveStatus != 'NORMAL'}
<div class="form-group aidrive-register-box">
    <label class="col-lg control-label">紫薯AI</label>
    <div class="col-sm-9 col-xs-12">
        <div class="btn btn-info" onclick="registerAiDrive()">{if !empty($accountSettings['aidrive'])}重新注册{else}立即注册{/if}</div>
    </div>
</div>
{/if}

<div class="aidrive-box">

    {if !empty($accountSettings['aidrive'])}

    <div class="form-group">
        <label class="col-lg control-label must">AccessKeyId</label>
        <div class="col-sm-9 col-xs-12">
            <input type='text' value="{$accountSettings['aidrive']['accessKeyId']}" name='data[aidrive][accessKeyId]' class="form-control" data-rule-required='true' {if !empty($accountSettings['aidrive']['accessKeyId'])}readonly ondblclick="this.readOnly=false" οnchange="this.readOnly=true" data-toggle="tooltip" data-placement="top" data-original-title="双击修改"{/if}/>
        </div>
    </div>

    <div class="form-group">
        <label class="col-lg control-label must">AccessKeySecret</label>
        <div class="col-sm-9 col-xs-12">
            <input type='text' value="{$accountSettings['aidrive']['accessKeySecret']}" name='data[aidrive][accessKeySecret]' class="form-control" data-rule-required='true' {if !empty($accountSettings['aidrive']['accessKeySecret'])}readonly ondblclick="this.readOnly=false" οnchange="this.readOnly=true" data-toggle="tooltip" data-placement="top" data-original-title="双击修改"{/if}/>
        </div>
    </div>

    <div class="form-group">
        <label class="col-lg control-label">通信状态</label>
        <div class="col-sm-9 col-xs-12">
            <div class="form-control-static">
                {if $aiDriveStatus == 'NORMAL'}
                <span class="text text-success" data-value="NORMAL">通信成功</span>
                {elseif $aiDriveStatus == 'DEACTIVATE'}
                <span class="text text-warning" data-value="DEACTIVATE">停用</span>
                {elseif $aiDriveStatus == 'DISABLE'}
                <span class="text text-danger" data-value="DISABLE">禁用</span>
                {elseif $aiDriveStatus == 'UNKNOWN'}
                <span class="text text-danger" data-value="UNKNOWN">{$errorMessage}</span>
                {/if}
            </div>
        </div>
    </div>

    <div class="form-group">
        <label class="col-lg control-label">账号余额</label>
        <div class="col-sm-9 col-xs-12">
            <div class="form-control-static">{$aiDriveBalance}元
                <a href="javascript:;" class="text text-danger" style="margin-left:10px;cursor:pointer;" onclick="rechargeMoney()">立即充值</a>
            </div>
        </div>
    </div>

    {/if}

</div>

<!-- <div class="form-group"> -->
<!--     <label class="col-lg control-label must">平台与模型</label> -->
<!--     <div class="col-sm-9 col-xs-12"> -->
<!--         <input type="hidden" name="data[aidrive][providerName]" value="{$accountSettings['aidrive']['providerName']}"> -->
<!--         <select class="form-control select2" name="data[aidrive][modelType]"> -->
<!--             {foreach $modelAndPlatformList as $key => $mp} -->
<!--                 {foreach $mp['modelList'] as $key2 => $mp2} -->
<!--                     <option value="{$mp['providerName']}-{$mp2['modelType']}" {if $mp2['modelType'] == $accountSettings['aidrive']['modelType']}selected{/if}>{$mp['providerNickname']}-{$mp2['modelName']}</option> -->
<!--                 {/foreach} -->
<!--             {/foreach} -->
<!--         </select> -->
<!--         <span class="help-block">选择AI模型与平台</span> -->
<!--     </div> -->
<!-- </div> -->

<!-- 模态框结构 -->
<div class="modal fade" id="rechargeModel" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">账号充值</h5>
            </div>
            <div class="modal-body">
                <div class="alert alert-info">
                    <p>余额用于调用大模型SDK或使用大模型应用，使用不同的模型会扣除不同的金额</p>
                </div>

                <div class="pay-options">
                    <div class="option-item" onclick="changePayPrice(this)" data-price="100">
                        <div class="price">¥100</div>
                    </div>
                    <div class="option-item" onclick="changePayPrice(this)" data-price="500">
                        <div class="price">¥500</div>
                    </div>
                    <div class="option-item" onclick="changePayPrice(this)" data-price="1000">
                        <div class="price">¥1000</div>
                    </div>
                    <div class="option-item" onclick="changePayPrice(this)" data-price="2000">
                        <div class="price">¥2000</div>
                    </div>
                    <div class="option-item" onclick="changePayPrice(this)" data-price="5000">
                        <div class="price">¥5000</div>
                    </div>
                </div>

                <div class="qrcode-box flex-column-center">
                    <div class="qrcode-img">
                        <img src="" alt="" width="200px" height="200px" style="opacity:0.5;"></a>
                    </div>
                    <div class="tip" style="margin-top:15px;">扫一扫支付</div>
                </div>

                <div class="pay-types flex-row-center">
                    <div class="pay-type pay-type-wxpay active" onclick="changePayType(1)" data-type="1">微信支付</div>
                    <div class="pay-type pay-type-alipay" onclick="changePayType(2)" data-type="2">支付宝支付</div>
                </div>
            </div>

            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-bs-dismiss="modal">关闭</button>
            </div>
        </div>
    </div>
</div>

<script>

</script>

<script>

    function changeIsDevelop(isDevelop){
        if( isDevelop ){
            $("input[name='data[aidrive][clientUrl]']").val('https://19002-frp.wang1278.top/api/admin');
        }else{
            $("input[name='data[aidrive][clientUrl]']").val('https://ai.zishuju.cn/newAi');
        }
    }

    function rechargeMoney(){
        $('#rechargeModel').modal('show');
    }

    function changePayPrice(obj) {
        $('.option-item').removeClass('active');
        $(obj).addClass('active');
        let price = $(obj).attr('data-price');
        this.pay()
    }

    function changePayType(type) {
        $('.pay-type').removeClass('active');
        if (type === 1) {
            $('.pay-type-wxpay').addClass('active');
        }
        if (type === 2) {
            $('.pay-type-alipay').addClass('active');
        }
        this.pay()
    }

    function pay() {
        let price = $('.option-item.active').attr('data-price');
        let payType = $('.pay-type.active').attr('data-type');
        if (!price) {
            tip.msgbox.err("请选择支付金额");
            return;
        }
        if (!payType) {
            tip.msgbox.err("请选择支付方式");
            return;
        }
        $.post('{:webUrl("account/aiDrivePay")}', {price: price, payType: payType,uniacid : "{$uniacid}"}, function (res) {

            if( parseInt(payType) === 1 ){
                require(['jquery.qrcode'], function () {
                    $('.qrcode-img').show().html("").qrcode({
                        render: "canvas",
                        width: 200,
                        height: 200,
                        text: res.result.payUrl
                    });
                });
            }else{
                $('.qrcode-img').show().html("").append(`<iframe src="${res.result.payUrl}" border="0" width="100%" height="100%" scrolling="no" frameborder="0"></iframe>`)
            }
        },'json')
    }

    function registerAiDrive() {
        let url = "{:webUrl('account/registerAiDrive')}"
        let isDevelop = $('input[name="data[aidrive][isDevelop]"]').is(':checked');
        let clientUrl = $('input[name="data[aidrive][clientUrl]"]').val();

        $.post(url, {uniacid: "{$uniacid}",isDevelop: isDevelop,clientUrl: clientUrl}, function (res) {
            let result = res.result
            if (res.status === 1) {
                let statusHtml = `<span class="text text-success" data-value="NORMAL">通信成功</span>`
                if (result.status === 'DEACTIVATE') {
                    statusHtml = `<span class="text text-warning" data-value="DEACTIVATE">停用</span>`
                } else if (result.status === 'DISABLE') {
                    statusHtml = `<span class="text text-danger" data-value="DISABLE">禁用</span>`
                } else if (result.status === 'UNKNOWN') {
                    statusHtml = `<span class="text text-default" data-value="UNKNOWN">未知</span>`
                }

                let html = `
                    <div class="form-group">
                        <label class="col-lg control-label must">AccessKeyId</label>
                        <div class="col-sm-9 col-xs-12">
                            <input type='text' value="${result.accessKeyId}" name='data[aidrive][accessKeyId]' class="form-control" data-rule-required='true'/>
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="col-lg control-label must">AccessKeySecret</label>
                        <div class="col-sm-9 col-xs-12">
                            <input type='text' value="${result.accessKeySecret}" name='data[aidrive][accessKeySecret]' class="form-control" data-rule-required='true'/>
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="col-lg control-label">通信状态</label>
                        <div class="col-sm-9 col-xs-12">
                            <div class="form-control-static">${statusHtml}</div>
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="col-lg control-label">账号余额</label>
                        <div class="col-sm-9 col-xs-12">
                            <div class="form-control-static">${result.balance}元</div>
                        </div>
                    </div>
                `
                $('.aidrive-box').html(html)
                $('.aidrive-register-box').remove()
            } else {
                tip.msgbox.err(result.message);
            }
        }, 'json')
    }
</script>